<template>
  <div>
    <div id="out" ref='out'></div>
    <el-table :data="tableData" class="table" border>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        align="center"
        v-for="(item, index) in outTableHeard"
        :key="index"
      >
      </el-table-column>
      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData" v-show="tableData.length === 0">
          <!--  v-show="data.length===0" -->
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
import { deadAnalyse } from "@/api/pig-statement/index.js";
import { outTableHeard } from "./constant/index.js";
export default {
  data() {
    return {
      tableData: [],
      outTableHeard,
      xData: [],
      boarData: [],
      sowData:[],
      pigData: [],
      
    };
  },
  created() {
    this.getTableData();
  },
  mounted() {
    this.createOut()
  },
  methods: {
    async getTableData() {
      let res = await deadAnalyse();
      if (res.code == 200) {
        this.tableData = res.data;
        res.data.forEach((item) => {
          this.xData.push(item.name)
          this.boarData.push(item.boar)
          this.sowData.push(item.sow)
          this.pigData.push(item.pig)
        })
        this.createOut()
      }
    },
    createOut() {
      let chart = this.$echarts.getInstanceByDom(this.$refs.out)
      if (!chart) {
        chart = this.$echarts.init(this.$refs.out)
      }
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xData
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "公猪",
            stack: "Ad",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: this.boarData,
          },
          {
            name: "母猪",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.sowData,
          },
          {
            name: "肉猪",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.pigData,
          }
        ],
      };
      chart.setOption(option)
    },
  },
};
</script>

<style lang="scss" scoped>
#out{
  width: 1320px;
  height: 510px;
  margin: 0 auto;
  box-shadow: 0px 0px 8px 0px rgba(40, 49, 66, 0.1);
  border-radius: 10px;
  }
  .table {
  width: 1320px;
  margin: 30px auto 30px;
}
</style>
